<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售数据详情</title>
    <!-- 可以引入与原页面相同的样式或单独为这个页面设计样式 -->
    <link rel="stylesheet" href="styles.css"> <!-- 假设样式保存在styles.css文件中 -->
</head>
<body>
    <div class="content">
        <div class="modules-container">
            <!-- 子模块1：按产品 -->
            <div class="module product">
                <h2>按产品</h2>
                <p>此处展示按产品分类的订单量。</p>
                <img src="image/产品销量.png" alt="按产品分类的订单量" class="module-image">
            </div>
            <!-- 子模块2：按地区 -->
            <div class="module region">
                <h2>按地区</h2>
                <p>此处展示按地区分类的订单量。</p>
                <img src="image/各仓库码头销量.png" alt="按地区分类的订单量" class="module-image">
            </div>
            <!-- 子模块3：按客户类型 -->
            <div class="module customer-type">
                <h2>按客户类型</h2>
                <p>此处展示按客户类型分类的订单量。</p>
                <img src="image/客户销量.png" alt="按客户类型分类的订单量" class="module-image">
            </div>
        </div>
    </div>

    <script>
        // 可以添加JavaScript代码来控制模块的行为，如果需要
    </script>
</body>
</html>